import svgPaths from "./svg-rkdnqjyiky";
import imgImage from "@/assets/user1.png";
import img1281 from "@/assets/feature-1.png";
import img1282 from "@/assets/feature-2.png";
import img1283 from "@/assets/feature-3.png";
import img1284 from "@/assets/feature-4.png";
import img1285 from "@/assets/feature-5.png";
import imgImage2 from "@/assets/user2.png";
import imgImage3 from "@/assets/user3.png";
import imgImage4 from "@/assets/user4.png";
import imgImage5 from "@/assets/user5.png";
import iconCdisk from "@/assets/icon-cdisk.png";
import iconFragment from "@/assets/icon-fragment.png";
import iconBigfile from "@/assets/icon-bigfile.png";
import iconWechat from "@/assets/icon-wechat.png";
import iconPrivacy from "@/assets/icon-privacy.png";
import { useState, useEffect } from "react";

// 全局变量：记录页面加载时间
let pageLoadTime = Date.now();

// 全局变量：记录用户是否滚动过页面
let hasScrolled = false;

// 监听页面滚动
if (typeof window !== 'undefined') {
  window.addEventListener('scroll', () => {
    if (!hasScrolled && window.scrollY > 0) {
      hasScrolled = true;
      console.log('[埋点] 用户已滚动页面');
    }
  }, { passive: true });
}

// 生成UUID的函数（无分隔符）
function generateUUID(): string {
  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    const r = Math.random() * 16 | 0;
    const v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
  // 去掉所有的"-"分隔符
  return uuid.replace(/-/g, '');
}

// 获取或创建用户UUID
function getUserUUID(): string {
  const STORAGE_KEY = 'user_uuid';
  
  // 尝试从localStorage获取
  let uuid = localStorage.getItem(STORAGE_KEY);
  
  // 如果不存在，生成新的UUID并保存
  if (!uuid) {
    uuid = generateUUID();
    localStorage.setItem(STORAGE_KEY, uuid);
    console.log(`[UUID] 生成新的用户UUID: ${uuid}`);
  } else {
    console.log(`[UUID] 使用已存在的UUID: ${uuid}`);
  }
  
  return uuid;
}

// 埋点上报函数
function reportTracking(eventId: number, description: string, revealValue: number = 0): Promise<any> {
  return new Promise((resolve) => {
    const uuid = getUserUUID();
    
    // 计算页面停留时长（秒）
    const stayTime = Math.floor((Date.now() - pageLoadTime) / 1000);
    
    // 获取当前页面URL
    const fromsUrl = window.location.href;
    
    // 从URL中获取keyID参数
    const urlParams = new URLSearchParams(window.location.search);
    const keyIdFromUrl = urlParams.get('keyID') || urlParams.get('keyid') || '0';
    const keyIdValue = parseInt(keyIdFromUrl, 10) || 0;
    
    // 构建参数对象（按照新的表结构）
    const params = {
      // 公共字段
      uuid: uuid,                    // 客户端uuid
      tid1: 1001,                    // 主通道号（内通道号）
      tid2: 1,                       // 副通道号（内通道号）
      tod1: 1001,                    // 主通道号（外通道号）
      tod2: 1,                       // 副通道号（外通道号）
      type: 0,                       // 产品编号 - 留空
      tryno: 1545,                   // 升级通道号
      iid: 0,                        // 安装包ID - 留空
      collect_time: 0,               // 收集数据的本地时间 - 留空
      lastver: 1,                    // 主界面的主程序版本号 - 留空
      // svrid: '',                  // 服务端分配的uuid - 留空（string类型，空字符串可能不传）
      // wtod2: '',                  // 外通道号的副通道号 - 留空
      usertype_public: 0,            // 用户类型 - 留空
      
      // 业务字段
      channelid: 1,                  // 渠道来源
      pid: 0,                        // 计划ID - 留空
      unitid: 0,                     // 单元ID - 留空
      keyid: keyIdValue,             // 关键字ID - 从URL中获取
      reveal: revealValue,           // 页面展示（0=未展示，1=已展示）
      pagetype: 1,                   // SEM页面类型（1=伪官网）
      click: eventId,                // 点击事件ID
      froms_uri: fromsUrl,           // 流量来源URL
      stay_time: stayTime,           // 页面停留时间(秒)
      slide: hasScrolled ? 1 : 0,    // 是否有下滑操作（0=无，1=有）
      business_index: 9452           // 业务索引
    };
    
    // 构建URL参数字符串
    const paramPairs = Object.entries(params)
      .filter(([key, value]) => value !== '' && value !== undefined)
      .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
      .join('&');
    
    // 拼接完整的上报URL
    const reportUrl = `http://infoc-cpan-official-srv.bjlingbao.com/g/v1/?${paramPairs}`;
    
    // 控制台输出详细信息
    console.log(`[埋点上报] URL: ${reportUrl}`);
    console.log(`[埋点详情]`, {
      事件ID: eventId,
      UUID: uuid,
      说明: description,
      停留时长: `${stayTime}秒`,
      是否滚动: hasScrolled ? '是' : '否',
      来源URL: fromsUrl,
      页面类型: 'SEM伪官网',
      参数对象: params
    });
    
    // 实际发送埋点（使用Image标签发送GET请求）
    const img = new Image();
    img.onload = () => {
      console.log('[埋点上报] ✅ 上报成功');
      resolve({ success: true, url: reportUrl, description, params });
    };
    img.onerror = () => {
      console.log('[埋点上报] ⚠️ 上报可能失败（这是正常的，因为是GET请求）');
      resolve({ success: true, url: reportUrl, description, params, note: '已发送请求' });
    };
    img.src = reportUrl;
    
    // 1秒后自动resolve（因为Image请求不会返回详细状态）
    setTimeout(() => {
      resolve({ success: true, url: reportUrl, description, params, note: '已发送请求' });
    }, 1000);
  });
}

// 上报转化数据（激活事件）
async function uploadConvertData(): Promise<any> {
  const API_CONFIG = {
    baseUrl: 'http://cpan-official-vip-srv.bjlingbao.com',
    appId: 'diskcleanup-official-vip',
    subId: 'bd-001', // 百度渠道子ID
    sourceUrl: 'https://cpan-official.bjlingbao.com/websm/bd?bd_vid=uANBIyIxUhNLgvw-I-t1PW6sPWm4g1uxnHTvnHc4rjnLnj63nf'
  };

  const requestUrl = `${API_CONFIG.baseUrl}/webocpc/convertdata/upload`;
  const currentTime = Math.floor(Date.now() / 1000); // 秒级时间戳
  
  const requestBody = {
    common: {
      app_id: API_CONFIG.appId
    },
    sub_id: API_CONFIG.subId,
    conversion_types: [
      {
        logidUrl: API_CONFIG.sourceUrl,  // 带 bd_vid 的来源URL
        newType: 6,                      // 激活事件
        convertTime: currentTime,        // 转化时间（秒级时间戳）
        convertValue: 0                  // 转化值
      }
    ]
  };

  try {
    console.log('[转化上报] 开始上报转化数据...');
    console.log('[转化上报] 请求URL:', requestUrl);
    console.log('[转化上报] 请求参数:', requestBody);
    
    const response = await fetch(requestUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestBody)
    });
    
    console.log('[转化上报] HTTP状态码:', response.status);
    console.log('[转化上报] HTTP状态文本:', response.statusText);
    
    // 先读取原始文本
    const responseText = await response.text();
    console.log('[转化上报] 原始响应:', responseText);
    
    // 尝试解析JSON
    let result;
    try {
      result = JSON.parse(responseText);
      console.log('[转化上报] 解析后的JSON:', result);
    } catch (parseError) {
      console.error('[转化上报] ❌ JSON解析失败:', parseError);
      return { 
        success: false, 
        error: `JSON解析失败: ${responseText.substring(0, 100)}`,
        rawResponse: responseText,
        httpStatus: response.status
      };
    }
    
    if (result.resp_common && result.resp_common.ret === 0) {
      console.log('[转化上报] ✅ 上报成功');
      return { success: true, data: result };
    } else {
      const errorMsg = result.resp_common?.msg || '未知错误';
      console.error('[转化上报] ❌ 上报失败:', errorMsg);
      return { success: false, error: errorMsg, data: result, httpStatus: response.status };
    }
  } catch (error) {
    console.error('[转化上报] ❌ 上报异常:', error);
    const errorMsg = error instanceof Error ? error.message : '网络错误';
    return { success: false, error: errorMsg };
  }
}

// 通用下载函数：获取短码并下载（用于所有下载按钮）
async function handleDownloadWithShortCode(eventId: number, description: string) {
  // 1. 先上报埋点（不等待，直接继续）
  reportTracking(eventId, description).catch(err => console.error('[埋点] 上报失败:', err));
  
  // 2. 并发调用短码和转化上报
  let shortCodeResult: any = { success: false };
  let convertResult: any = { success: false };
  
  try {
    [shortCodeResult, convertResult] = await Promise.all([
      createShortCode(),
      uploadConvertData()
    ]);
  } catch (err) {
    console.error('[下载] 后台任务失败:', err);
  }
  
  // 3. 构建下载URL
  let downloadUrl = '';
  if (shortCodeResult.success && shortCodeResult.shortCode) {
    // 短码获取成功：使用短码拼接文件名
    const fileName = `diskcleanmaster_bd${shortCodeResult.shortCode}.exe`;
    downloadUrl = `https://cpan-official.bjlingbao.com/instpk/bd/${fileName}`;
    console.log(`[下载] ✅ 使用短码文件名: ${fileName}`);
    console.log(`[下载] URL: ${downloadUrl}`);
  } else {
    // 短码获取失败：降级使用源文件
    downloadUrl = 'https://cpan-official.bjlingbao.com/instpk/bd/diskcleanmaster.exe';
    console.log(`[下载] ⚠️ 短码获取失败，使用源文件下载`);
    console.log(`[下载] URL: ${downloadUrl}`);
  }
  
  // 4. 跳转下载
  window.location.href = downloadUrl;
}

// 创建短码并生成安装包名称
async function createShortCode(): Promise<any> {
  // 服务端接口配置
  const API_CONFIG = {
    baseUrl: 'http://cpan-official-vip-srv.bjlingbao.com',
    appId: 'diskcleanup-official-vip',
    version: '1.0.0',
    // 来源URL（包含百度推广参数 bd_vid）
    sourceUrl: 'https://cpan-official.bjlingbao.com/websm/bd?bd_vid=uANBIyIxUhNLgvw-I-t1PW6sPWm4g1uxnHTvnHc4rjnLnj63nf',
    payload: JSON.stringify({ channel: 'baidu_sem', campaign: 'ocpc' })
  };
  
  const requestUrl = `${API_CONFIG.baseUrl}/webocpc/shortcode/create`;
  
  // 构建请求体
  const requestBody = {
    common: {
      app_id: API_CONFIG.appId,
      version: API_CONFIG.version
    },
    source_url: API_CONFIG.sourceUrl,
    payload: API_CONFIG.payload
  };
  
  try {
    console.log('[短码创建] 开始请求短码...');
    console.log('[短码创建] 请求URL:', requestUrl);
    console.log('[短码创建] 请求参数:', requestBody);
    
    // 调用服务端接口
    const response = await fetch(requestUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestBody)
    });
    
    console.log('[短码创建] HTTP状态码:', response.status);
    console.log('[短码创建] HTTP状态文本:', response.statusText);
    
    // 先读取原始文本
    const responseText = await response.text();
    console.log('[短码创建] 原始响应:', responseText);
    
    // 尝试解析JSON
    let result;
    try {
      result = JSON.parse(responseText);
      console.log('[短码创建] 解析后的JSON:', result);
    } catch (parseError) {
      console.error('[短码创建] ❌ JSON解析失败:', parseError);
      return { 
        success: false, 
        error: `JSON解析失败: ${responseText.substring(0, 100)}`,
        rawResponse: responseText,
        httpStatus: response.status
      };
    }
    
    // 检查响应是否成功
    // 后端返回格式: { resp_common: { ret: 0, msg: "ok" }, short_code: "xxx" }
    if (result.resp_common && result.resp_common.ret === 0 && result.short_code) {
      const shortCode = result.short_code;
      console.log('[短码创建] ✅ 获取短码成功:', shortCode);
      
      // 拼接安装包名称
      const packageName = `kdiskcleanmaster_bd${shortCode}.exe`;
      console.log('[短码创建] 安装包名称:', packageName);
      
      return { success: true, shortCode: shortCode, packageName: packageName, data: result };
    } else {
      // 请求成功但业务失败
      const errorMsg = result.resp_common?.msg || result.errmsg || '未知错误';
      console.error('[短码创建] ❌ 获取短码失败:', errorMsg);
      return { success: false, error: errorMsg, data: result, httpStatus: response.status };
    }
  } catch (error) {
    // 网络请求异常
    const errorMsg = error instanceof Error ? error.message : '网络错误';
    console.error('[短码创建] ❌ 请求异常:', error);
    return { success: false, error: errorMsg };
  }
}

// 生成随机下载数（8580000-8980000之间）
function getRandomDownloads() {
  const min = 8580000;
  const max = 8980000;
  const random = Math.floor(Math.random() * (max - min + 1)) + min;
  return random.toLocaleString('en-US');
}

// 获取当前日期减5天的日期字符串（格式：YYYY-MM-DD）
function getUpdateDate() {
  const today = new Date();
  const updateDate = new Date(today);
  updateDate.setDate(today.getDate() - 5);
  
  const year = updateDate.getFullYear();
  const month = String(updateDate.getMonth() + 1).padStart(2, '0');
  const day = String(updateDate.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

/**
 * @figmaAssetKey 77e2cadf0883f89bbde076fbed9b3ef75d885ca9
 */
function Star9({ className }: { className?: string }) {
  return (
    <div className={className}>
      <div className="absolute inset-[4.93%_6.89%_12.58%_6.89%]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 12">
          <path d={svgPaths.pc8b2600} fill="var(--fill-0, #E3E3E3)" id="Star 9" />
        </svg>
      </div>
    </div>
  );
}

/**
 * @figmaAssetKey 53c1defa737126f42522016fb4863ce7f4dbbac2
 */
function Star10({ className }: { className?: string }) {
  return (
    <div className={className}>
      <div className="absolute inset-[4.93%_6.89%_12.58%_6.89%]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 13 12">
          <path d={svgPaths.pc8b2600} fill="url(#paint0_linear_1_1315)" id="Star 9" />
          <defs>
            <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1315" x1="0.566466" x2="11.504" y1="0.402928" y2="11.7779">
              <stop stopColor="#FFDA51" />
              <stop offset="1" stopColor="#FFBB15" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  );
}

/**
 * @figmaAssetKey 86bc02247eee9ab7fc96b7373932ddf407e37fd7
 */
function Component1({ className }: { className?: string }) {
  return (
    <div className={className} data-name="1">
      <div className="absolute bg-[#fffcf2] h-[245px] left-[5px] rounded-[10px] top-0 w-[410px]">
        <div aria-hidden="true" className="absolute border border-[#f3e9c9] border-solid inset-0 pointer-events-none rounded-[10px] shadow-[0px_4px_8px_0px_rgba(190,159,101,0.23)]" />
      </div>
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] h-[72px] leading-[24px] left-[calc(50%-173px)] not-italic text-[#555555] text-[14px] top-[141px] tracking-[1px] w-[346px]">电脑C盘满得发慌，试了磁盘清理大师一键瘦</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[17px] leading-[16px] left-[calc(50%-57px)] not-italic text-[#546371] text-[16px] top-[41px] tracking-[1px] w-[90px]">老师</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[23px] leading-[22px] left-[calc(50%-133px)] not-italic text-[#546371] text-[22px] top-[36px] tracking-[1px] w-[70px]">张小姐</p>
      <div className="absolute left-[37px] size-[32px] top-[32px]" data-name="头像">
        <div className="absolute left-0 size-[32px] top-0" data-name="image">
          <img alt="" className="block max-w-none size-full" height="32" src={imgImage} width="32" />
        </div>
      </div>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[30px] leading-[28px] left-[calc(50%-173px)] not-italic text-[#111111] text-[18px] top-[103px] tracking-[1px] w-[317px]">C盘瘦身效果明显，好用省心</p>
      <div className="absolute content-stretch flex gap-[2px] items-center left-[37px] top-[72px]" data-name="评分">
        <Star10 className="relative shrink-0 size-[14px]" />
        <Star10 className="relative shrink-0 size-[14px]" />
        <Star10 className="relative shrink-0 size-[14px]" />
        <Star10 className="relative shrink-0 size-[14px]" />
        <div className="relative shrink-0 size-[14px]" data-name="star">
          <Star9 className="absolute left-0 size-[14px] top-0" />
        </div>
      </div>
    </div>
  );
}

function Component() {
  return (
    <div className="absolute left-[254px] size-[32px] top-[24px]" data-name="下载">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ä¸è½½">
          <path d={svgPaths.p1af7d100} id="Vector 402" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
          <path d="M16 23V4" id="Vector 403" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
          <path d="M16 23L8.5 15.5" id="Vector 404" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
          <path d="M16 23L23.5 15.5" id="Vector 405" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
        </g>
      </svg>
    </div>
  );
}

function Btn() {
  const handleDownload = async () => {
    // 等待所有接口调用完成（包括埋点上报）
    const [trackingResult, shortCodeResult, convertResult] = await Promise.all([
      reportTracking(2, "点击第一个板块立即下载按钮"),
      createShortCode(),
      uploadConvertData()
    ]);
    
    // 构建调试信息
    let debugInfo = '========== 接口调用结果 ==========\n\n';
    
    // 0. 埋点上报
    debugInfo += '【0. 埋点上报】\n';
    debugInfo += `URL: ${trackingResult.url}\n`;
    debugInfo += `说明: ${trackingResult.description}\n`;
    if (trackingResult.params) {
      debugInfo += `参数详情:\n`;
      debugInfo += `  - uuid: ${trackingResult.params.uuid}\n`;
      debugInfo += `  - tryno: ${trackingResult.params.tryno}\n`;
      debugInfo += `  - click: ${trackingResult.params.click}\n`;
      debugInfo += `  - pagetype: ${trackingResult.params.pagetype} (1=伪官网)\n`;
      debugInfo += `  - stay_time: ${trackingResult.params.stay_time}秒\n`;
      debugInfo += `  - slide: ${trackingResult.params.slide} (${trackingResult.params.slide ? '有滚动' : '无滚动'})\n`;
      debugInfo += `  - froms_uri: ${trackingResult.params.froms_uri}\n`;
    }
    debugInfo += '\n';
    
    // 1. 短码创建接口
    debugInfo += '【1. 创建短码接口】\n';
    debugInfo += `URL: http://cpan-official-vip-srv.bjlingbao.com/webocpc/shortcode/create\n`;
    if (shortCodeResult.httpStatus) {
      debugInfo += `HTTP状态: ${shortCodeResult.httpStatus}\n`;
    }
    debugInfo += `状态: ${shortCodeResult.success ? '✅ 成功' : '❌ 失败'}\n`;
    if (shortCodeResult.success) {
      debugInfo += `短码: ${shortCodeResult.shortCode}\n`;
      debugInfo += `安装包名称: ${shortCodeResult.packageName}\n`;
    } else {
      debugInfo += `错误: ${shortCodeResult.error}\n`;
      if (shortCodeResult.rawResponse) {
        debugInfo += `原始响应: ${shortCodeResult.rawResponse.substring(0, 200)}\n`;
      }
    }
    debugInfo += `返回数据: ${JSON.stringify(shortCodeResult.data || {}, null, 2)}\n\n`;
    
    // 2. 转化上报接口
    debugInfo += '【2. 转化上报接口】\n';
    debugInfo += `URL: http://cpan-official-vip-srv.bjlingbao.com/webocpc/convertdata/upload\n`;
    if (convertResult.httpStatus) {
      debugInfo += `HTTP状态: ${convertResult.httpStatus}\n`;
    }
    debugInfo += `状态: ${convertResult.success ? '✅ 成功' : '❌ 失败'}\n`;
    if (!convertResult.success) {
      debugInfo += `错误: ${convertResult.error}\n`;
      if (convertResult.rawResponse) {
        debugInfo += `原始响应: ${convertResult.rawResponse.substring(0, 200)}\n`;
      }
    }
    debugInfo += `返回数据: ${JSON.stringify(convertResult.data || {}, null, 2)}\n\n`;
    
    debugInfo += '========================================';
    
    // 显示调试信息
    alert(debugInfo);
    
    // 根据短码结果构建下载URL
    let downloadUrl = '';
    if (shortCodeResult.success && shortCodeResult.shortCode) {
      // 短码获取成功：使用短码拼接文件名
      const fileName = `diskcleanmaster_bd${shortCodeResult.shortCode}.exe`;
      downloadUrl = `https://cpan-official.bjlingbao.com/instpk/bd/${fileName}`;
      console.log(`[下载] ✅ 使用短码文件名: ${fileName}`);
      console.log(`[下载] URL: ${downloadUrl}`);
    } else {
      // 短码获取失败：降级使用源文件
      downloadUrl = 'https://cpan-official.bjlingbao.com/instpk/bd/diskcleanmaster.exe';
      console.log(`[下载] ⚠️ 短码获取失败，使用源文件下载`);
      console.log(`[下载] URL: ${downloadUrl}`);
    }
    
    // 跳转下载
    window.location.href = downloadUrl;
  };

  return (
    <div 
      className="absolute h-[80px] left-[780px] overflow-visible top-[280px] w-[370px] btn-hover-effect" 
      data-name="btn"
      onClick={handleDownload}
    >
      <div className="absolute bg-[#00d473] btn-download inset-0 rounded-[16px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-1/2 not-italic text-[30px] text-center text-white top-[calc(50%-15px)] translate-x-[-50%] w-[122px]">立即下载</p>
      <Component />
    </div>
  );
}

function Component12() {
  return <div className="absolute h-[360px] left-[344px] overflow-clip top-1/2 translate-y-[-50%] w-[590px] pointer-events-none" data-name="配图" />;
}

function Component13() {
  return (
    <div className="absolute h-[40px] left-[1086px] top-[71px] w-[140px]" data-name="角标">
      <div className="absolute h-[40px] left-0 top-0 w-[140px]">
        <div className="absolute inset-[-2.5%_-1.43%_-7.5%_-1.43%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 144 44">
            <g filter="url(#filter0_d_1_1421)" id="Rectangle 2103">
              <path d={svgPaths.p3bc72900} fill="url(#paint0_linear_1_1421)" />
            </g>
            <defs>
              <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="44" id="filter0_d_1_1421" width="144" x="0" y="0">
                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                <feOffset dy="1" />
                <feGaussianBlur stdDeviation="1" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix type="matrix" values="0 0 0 0 0.976 0 0 0 0 0.659 0 0 0 0 0.157 0 0 0 0.45 0" />
                <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1421" />
                <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1421" mode="normal" result="shape" />
              </filter>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1421" x1="2" x2="142" y1="21" y2="21">
                <stop stopColor="#FDB752" />
                <stop offset="1" stopColor="#F9A528" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute flex flex-col font-['MiSans:Demibold',_sans-serif] justify-center leading-[0] left-[69.5px] not-italic text-[20px] text-center text-nowrap text-white top-[20px] tracking-[1px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[20px] whitespace-pre">2025最新版</p>
      </div>
    </div>
  );
}

function Component14() {
  const [downloads, setDownloads] = useState('8,580,758');

  useEffect(() => {
    setDownloads(getRandomDownloads());
  }, []);

  return (
    <div className="absolute h-[28px] left-[989px] top-[262px] w-[176px]" data-name="角标">
      <div className="absolute h-[28px] left-0 top-0 w-[176px]">
        <div className="absolute inset-[-3.57%_-1.14%_-10.71%_-1.14%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 180 32">
            <g filter="url(#filter0_d_1_1444)" id="Rectangle 2103">
              <path d={svgPaths.p811ec80} fill="url(#paint0_linear_1_1444)" />
            </g>
            <defs>
              <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="32" id="filter0_d_1_1444" width="180" x="0" y="0">
                <feFlood floodOpacity="0" result="BackgroundImageFix" />
                <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
                <feOffset dy="1" />
                <feGaussianBlur stdDeviation="1" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix type="matrix" values="0 0 0 0 0.976 0 0 0 0 0.659 0 0 0 0 0.157 0 0 0 0.35 0" />
                <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1444" />
                <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1444" mode="normal" result="shape" />
              </filter>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1444" x1="2" x2="178" y1="15" y2="15">
                <stop stopColor="#FDB752" />
                <stop offset="1" stopColor="#F9A528" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute flex flex-col font-['MiSans:Medium',_sans-serif] justify-center leading-[0] left-[87.5px] not-italic text-[14px] text-center text-nowrap text-white top-[15px] translate-x-[-50%] translate-y-[-50%]">
        <p className="leading-[20px] whitespace-pre">累计下载：{downloads}</p>
      </div>
    </div>
  );
}

function Component15() {
  const [updateDate, setUpdateDate] = useState('2025-10-15');

  useEffect(() => {
    setUpdateDate(getUpdateDate());
  }, []);

  return (
    <div className="bg-gradient-to-r from-[#dff0ff] h-[470px] relative shrink-0 to-[#dff0ff] w-full" data-name="板块1" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg viewBox=\\\'0 0 1920 470\\\' xmlns=\\\'http://www.w3.org/2000/svg\\\' preserveAspectRatio=\\\'none\\\'><rect x=\\\'0\\\' y=\\\'0\\\' height=\\\'100%\\\' width=\\\'100%\\\' fill=\\\'url(%23grad)\\\' opacity=\\\'1\\\'/><defs><radialGradient id=\\\'grad\\\' gradientUnits=\\\'userSpaceOnUse\\\' cx=\\\'0\\\' cy=\\\'0\\\' r=\\\'10\\\' gradientTransform=\\\'matrix(39.5 8.2903 -80.449 57.039 641 235)\\\'><stop stop-color=\\\'rgba(245,253,255,1)\\\' offset=\\\'0\\\'/><stop stop-color=\\\'rgba(221,239,255,1)\\\' offset=\\\'1\\\'/></radialGradient></defs></svg>')" }}>
      <div className="absolute left-[480px] size-[463px] top-[-212px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 463 463">
          <circle cx="231.5" cy="231.5" fill="url(#paint0_linear_1_1531)" id="Ellipse 431" opacity="0.42" r="231.5" />
          <defs>
            <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1531" x1="231.5" x2="231.5" y1="0" y2="463">
              <stop stopColor="white" stopOpacity="0" />
              <stop offset="1" stopColor="white" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div className="absolute left-[1194px] size-[256px] top-[235px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 256 256">
          <circle cx="128" cy="128" fill="url(#paint0_linear_1_1452)" id="Ellipse 432" opacity="0.32" r="128" />
          <defs>
            <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1452" x1="128" x2="128" y1="0" y2="256">
              <stop stopColor="white" />
              <stop offset="1" stopColor="white" stopOpacity="0" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <Btn />
      <div 
        className="absolute flex flex-col font-['MiSans:Demibold',_sans-serif] h-[105px] justify-center leading-[0] left-1/2 not-italic text-[#333333] text-[76px] text-center top-[153.5px] tracking-[1px] translate-x-[-50%] translate-y-[-50%] w-[584px] cursor-pointer"
        onClick={() => reportTracking(102, "点击tab icon文本")}
      >
        <p className="leading-[56px]">磁盘清理大师</p>
      </div>
      <div className="absolute flex flex-col font-['MiSans:Medium',_sans-serif] h-[26px] justify-center leading-[0] left-1/2 not-italic text-[#555555] text-[18px] text-center top-[212px] tracking-[1px] translate-x-[-50%] translate-y-[-50%] w-[440px]">
        <p className="leading-[16px]">深度清理C盘空间，一键提升电脑性能！</p>
      </div>
      <div className="absolute flex flex-col font-['MiSans:Regular',_sans-serif] h-[26px] justify-center leading-[0] left-1/2 not-italic text-[#888888] text-[12px] text-center top-[381px] translate-x-[-50%] translate-y-[-50%] w-[440px]">
        <p className="leading-[16px] whitespace-pre-wrap">{`使用系统：windows 11/10/8/7/xp   更新时间：${updateDate}`}</p>
      </div>
      <Component12 />
      <Component13 />
      <Component14 />
    </div>
  );
}

function IconC() {
  return (
    <div className="absolute left-[28px] size-[64px] top-[28px]" data-name="icon_C盘">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 64 64">
        <g id="icon_Cç">
          <g id="ç©å½¢å¤ä»½-17"></g>
          <rect height="59.2" id="Rectangle 501" rx="7.2" stroke="var(--stroke-0, white)" strokeWidth="4.8" width="52.8" x="5.6" y="2.4" />
          <path d={svgPaths.p30e691f0} fill="var(--fill-0, white)" id="Subtract" />
          <path d={svgPaths.p2095e080} fill="var(--fill-0, white)" id="Subtract_2" />
          <path clipRule="evenodd" d={svgPaths.p2fd40700} fill="var(--fill-0, white)" fillRule="evenodd" id="å½¢ç¶ç»å" />
        </g>
      </svg>
    </div>
  );
}

function Icon01() {
  return (
    <div className="absolute left-[480px] size-[120px] top-[60px]" data-name="icon01">
      <img src={iconCdisk} alt="C盘清理" className="size-[120px] object-contain" />
    </div>
  );
}

function Icon() {
  return (
    <div className="absolute left-[28px] size-[64px] top-[30px]" data-name="icon_碎片清理">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 64 64">
        <g id="icon_ç¢çæ¸ç">
          <g id="ç©å½¢å¤ä»½ 17"></g>
          <path clipRule="evenodd" d={svgPaths.p3b97a680} fill="var(--fill-0, white)" fillRule="evenodd" id="ç©å½¢" />
          <rect fill="var(--fill-0, white)" height="16" id="ç©å½¢å¤ä»½ 5" rx="3" width="6" x="3" y="48" />
          <path clipRule="evenodd" d={svgPaths.p3960d4f0} fill="var(--fill-0, white)" fillRule="evenodd" id="ç©å½¢å¤ä»½ 10" />
          <path d={svgPaths.p18a2780} fill="var(--fill-0, white)" id="å½¢ç¶ç»å" />
          <path d={svgPaths.p242bb280} fill="var(--fill-0, white)" id="å½¢ç¶ç»åå¤ä»½ 2" />
          <path clipRule="evenodd" d={svgPaths.p60d000} fill="var(--fill-0, white)" fillRule="evenodd" id="ç©å½¢å¤ä»½ 11" />
          <path clipRule="evenodd" d={svgPaths.p2119a680} fill="var(--fill-0, white)" fillRule="evenodd" id="ç©å½¢å¤ä»½ 13" />
          <rect fill="var(--fill-0, white)" height="32" id="ç©å½¢å¤ä»½ 12" rx="3" width="6" x="55" y="32" />
        </g>
      </svg>
    </div>
  );
}

function Icon02() {
  return (
    <div className="absolute left-[690px] size-[120px] top-[60px]" data-name="icon02">
      <img src={iconFragment} alt="碎片清理" className="size-[120px] object-contain" />
    </div>
  );
}

function Icon1() {
  return (
    <div className="absolute inset-0" data-name="icon_大文件">
      <div className="absolute bg-[rgba(0,0,0,0)] left-0 size-[64px] top-0" />
      <div className="absolute h-[57.6px] left-0 top-[3.2px] w-[64px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
          <g id="Vector 52"></g>
        </svg>
      </div>
      <div className="absolute h-[57.6px] left-0 top-[3.2px] w-[64px]">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 64 58">
          <path d={svgPaths.p177aca00} id="Vector 53" stroke="var(--stroke-0, white)" strokeWidth="4.8" />
        </svg>
      </div>
      <div className="absolute h-[19.2px] left-[25.6px] top-[25.6px] w-[14.4px]">
        <div className="absolute inset-[-12.5%_-16.67%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 24">
            <path d={svgPaths.p171c0350} id="Vector 116" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="4.8" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Icon2() {
  return (
    <div className="absolute left-[28px] size-[64px] top-[25px]" data-name="icon">
      <Icon1 />
    </div>
  );
}

function Icon03() {
  return (
    <div className="absolute left-[900px] size-[120px] top-[60px]" data-name="icon03">
      <img src={iconBigfile} alt="大文件搬家" className="size-[120px] object-contain" />
    </div>
  );
}

function IconQq() {
  return (
    <div className="absolute left-[28px] size-[64px] top-[28px]" data-name="icon_QQ专清">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 64 64">
        <g id="icon_QQä¸æ¸">
          <g id="ç©å½¢å¤ä»½-17"></g>
          <g id="Group 148">
            <path d={svgPaths.p1f40f700} id="Vector" stroke="var(--stroke-0, white)" strokeWidth="4.8" />
            <path d={svgPaths.p30c44300} id="Vector_2" stroke="var(--stroke-0, white)" strokeWidth="4.8" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Icon04() {
  return (
    <div className="absolute left-[1110px] size-[120px] top-[60px]" data-name="icon04">
      <img src={iconWechat} alt="微信空间清理" className="size-[120px] object-contain" />
    </div>
  );
}

function Icon3() {
  return (
    <div className="absolute left-1/2 size-[64px] top-1/2 translate-x-[-50%] translate-y-[-50%]" data-name="icon_隐私清理">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 64 64">
        <g id="icon_éç§æ¸ç">
          <g id="ç©å½¢"></g>
          <rect height="59.2" id="Rectangle 2095" rx="10.4" stroke="var(--stroke-0, white)" strokeWidth="4.8" width="59.2" x="2.4" y="2.4" />
          <circle cx="32" cy="32" id="Ellipse 223" r="20" stroke="var(--stroke-0, white)" strokeWidth="4.8" />
          <circle cx="32" cy="32" id="Ellipse 224" r="4.8" stroke="var(--stroke-0, white)" strokeWidth="3.2" />
          <g id="Group 40071">
            <path d={svgPaths.p2548dc80} fill="var(--fill-0, white)" id="æ¤­åå½¢" />
            <path d={svgPaths.p15ca2310} fill="var(--fill-0, white)" id="æ¤­åå½¢å¤ä»½" />
            <path d={svgPaths.p11731c00} fill="var(--fill-0, white)" id="æ¤­åå½¢å¤ä»½-2" />
            <path d={svgPaths.pdbb5400} fill="var(--fill-0, white)" id="æ¤­åå½¢å¤ä»½-9" />
            <path d={svgPaths.p902c880} fill="var(--fill-0, white)" id="æ¤­åå½¢_2" />
            <path d={svgPaths.p165bca80} fill="var(--fill-0, white)" id="æ¤­åå½¢å¤ä»½_2" />
            <path d={svgPaths.p31bf9f00} fill="var(--fill-0, white)" id="æ¤­åå½¢å¤ä»½-2_2" />
            <path d={svgPaths.p3bcf4500} fill="var(--fill-0, white)" id="æ¤­åå½¢å¤ä»½-9_2" />
          </g>
        </g>
      </svg>
    </div>
  );
}

function Icon05() {
  return (
    <div className="absolute left-[1320px] size-[120px] top-[60px]" data-name="icon05">
      <img src={iconPrivacy} alt="隐私信息清理" className="size-[120px] object-contain" />
    </div>
  );
}

function Component2() {
  return (
    <div className="bg-gradient-to-b from-[#dff0ff] h-[286px] relative shrink-0 to-[#ffffff] w-full" data-name="板块2">
      {/* 埋点ID 201：C盘清理 */}
      <div 
        className="absolute flex flex-col font-['Microsoft_YaHei:Semibold',_sans-serif] justify-center leading-[0] left-[541.5px] not-italic text-[#3e4a55] text-[24px] text-center text-nowrap top-[211px] translate-x-[-50%] translate-y-[-50%] cursor-pointer"
        onClick={() => {
          handleDownloadWithShortCode(201, "点击功能1 (C盘清理)");
        }}
      >
        <p className="leading-[30px] whitespace-pre">C盘清理</p>
      </div>
      <div onClick={() => {
        handleDownloadWithShortCode(201, "点击功能1 (C盘清理)");
      }} className="cursor-pointer">
        <Icon01 />
      </div>
      
      {/* 埋点ID 202：碎片清理 */}
      <div 
        className="absolute flex flex-col font-['Microsoft_YaHei:Semibold',_sans-serif] justify-center leading-[0] left-[750px] not-italic text-[#3e4a55] text-[24px] text-center text-nowrap top-[211px] translate-x-[-50%] translate-y-[-50%] cursor-pointer"
        onClick={() => {
          handleDownloadWithShortCode(202, "点击功能2 (碎片清理)");
        }}
      >
        <p className="leading-[30px] whitespace-pre">碎片清理</p>
      </div>
      <div onClick={() => {
        handleDownloadWithShortCode(202, "点击功能2 (碎片清理)");
      }} className="cursor-pointer">
        <Icon02 />
      </div>
      
      {/* 埋点ID 203：大文件搬家 */}
      <div 
        className="absolute flex flex-col font-['Microsoft_YaHei:Semibold',_sans-serif] justify-center leading-[0] left-[960px] not-italic text-[#3e4a55] text-[24px] text-center text-nowrap top-[211px] translate-x-[-50%] translate-y-[-50%] cursor-pointer"
        onClick={() => {
          handleDownloadWithShortCode(203, "点击功能3 (大文件搬家)");
        }}
      >
        <p className="leading-[30px] whitespace-pre">大文件搬家</p>
      </div>
      <div onClick={() => {
        handleDownloadWithShortCode(203, "点击功能3 (大文件搬家)");
      }} className="cursor-pointer">
        <Icon03 />
      </div>
      
      {/* 埋点ID 204：微信空间清理 */}
      <div 
        className="absolute flex flex-col font-['Microsoft_YaHei:Semibold',_sans-serif] justify-center leading-[0] left-[1170px] not-italic text-[#3e4a55] text-[24px] text-center text-nowrap top-[211px] translate-x-[-50%] translate-y-[-50%] cursor-pointer"
        onClick={() => {
          handleDownloadWithShortCode(204, "点击功能4 (微信空间清理)");
        }}
      >
        <p className="leading-[30px] whitespace-pre">微信空间清理</p>
      </div>
      <div onClick={() => {
        handleDownloadWithShortCode(204, "点击功能4 (微信空间清理)");
      }} className="cursor-pointer">
        <Icon04 />
      </div>
      
      {/* 埋点ID 205：隐私信息清理 */}
      <div 
        className="absolute flex flex-col font-['Microsoft_YaHei:Semibold',_sans-serif] justify-center leading-[0] left-[1380px] not-italic text-[#3e4a55] text-[24px] text-center text-nowrap top-[211px] translate-x-[-50%] translate-y-[-50%] cursor-pointer"
        onClick={() => {
          handleDownloadWithShortCode(205, "点击功能5 (隐私信息清理)");
        }}
      >
        <p className="leading-[30px] whitespace-pre">隐私信息清理</p>
      </div>
      <div onClick={() => {
        handleDownloadWithShortCode(205, "点击功能5 (隐私信息清理)");
      }} className="cursor-pointer">
        <Icon05 />
      </div>
    </div>
  );
}

function Icon4() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component16() {
  const handleClick = () => {
    handleDownloadWithShortCode(301, "点击问题1：C盘爆满空间不足？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[484px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[218px] w-[390px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="1"
      onClick={handleClick}
    >
      <Icon4 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[233px]">C盘爆满空间不足？</p>
    </div>
  );
}

function Icon5() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component17() {
  const handleClick = () => {
    handleDownloadWithShortCode(302, "点击问题2：电脑运行卡顿反应慢？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[990px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[186px] w-[390px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="2"
      onClick={handleClick}
    >
      <Icon5 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[269px]">电脑运行卡顿反应慢？</p>
    </div>
  );
}

function Icon6() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component3() {
  const handleClick = () => {
    handleDownloadWithShortCode(303, "点击问题3：清理文件又怕删错？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[1140px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[291px] w-[390px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="3"
      onClick={handleClick}
    >
      <Icon6 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[269px]">清理文件又怕删错？</p>
    </div>
  );
}

function Icon7() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component4() {
  const handleClick = () => {
    handleDownloadWithShortCode(304, "点击问题4：打开文件速度太慢？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[688px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[322px] w-[390px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="4"
      onClick={handleClick}
    >
      <Icon7 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[266px]">打开文件速度太慢？</p>
    </div>
  );
}

function Icon8() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component5() {
  const handleClick = () => {
    handleDownloadWithShortCode(305, "点击问题5：软件全装在C盘占满内存？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[999px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[407px] w-[450px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="5"
      onClick={handleClick}
    >
      <Icon8 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[314px]">软件全装在C盘占满内存？</p>
    </div>
  );
}

function Icon9() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component6() {
  const handleClick = () => {
    handleDownloadWithShortCode(306, "点击问题6：软件搬家怕数据丢？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[580px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[461px] w-[390px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="6"
      onClick={handleClick}
    >
      <Icon9 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[266px]">软件搬家怕数据丢？</p>
    </div>
  );
}

function Icon10() {
  return (
    <div className="relative shrink-0 size-[40px]" data-name="icon_警告">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 40 40">
        <g id="icon_è­¦å">
          <rect fill="var(--fill-0, #48AFFA)" height="40" id="Rectangle 2006" rx="20" width="40" />
          <g filter="url(#filter0_d_1_1340)" id="Union">
            <path d={svgPaths.p2c832c00} fill="var(--fill-0, white)" />
          </g>
        </g>
        <defs>
          <filter colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse" height="28.5645" id="filter0_d_1_1340" width="16" x="12" y="6.58789">
            <feFlood floodOpacity="0" result="BackgroundImageFix" />
            <feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
            <feOffset dy="1" />
            <feGaussianBlur stdDeviation="0.5" />
            <feComposite in2="hardAlpha" operator="out" />
            <feColorMatrix type="matrix" values="0 0 0 0 0.101701 0 0 0 0 0.53248 0 0 0 0 0.846154 0 0 0 1 0" />
            <feBlend in2="BackgroundImageFix" mode="normal" result="effect1_dropShadow_1_1340" />
            <feBlend in="SourceGraphic" in2="effect1_dropShadow_1_1340" mode="normal" result="shape" />
          </filter>
        </defs>
      </svg>
    </div>
  );
}

function Component7() {
  const handleClick = () => {
    handleDownloadWithShortCode(307, "点击问题7：微信聊天文件占几十G？");
  };

  return (
    <div 
      className="absolute bg-gradient-to-r box-border content-stretch flex from-[#cde9ff] from-[46.154%] gap-[12px] h-[64px] items-center left-[1105px] px-[12px] py-0 rounded-[100px] to-[rgba(205,233,255,0)] top-[523px] w-[390px] cursor-pointer hover:opacity-80 transition-opacity" 
      data-name="7"
      onClick={handleClick}
    >
      <Icon10 />
      <p className="font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] not-italic relative shrink-0 text-[#3e4a55] text-[26px] tracking-[0.8278px] w-[291px]">微信聊天文件占几十G？</p>
    </div>
  );
}

function Btn1() {
  const handleDownload = () => {
    handleDownloadWithShortCode(3, "点击问题列表下载按钮");
  };

  return (
    <div 
      className="absolute h-[100px] left-[580px] top-[650px] w-[760px] btn-hover-effect btn-gradient-border" 
      data-name="btn"
      onClick={handleDownload}
    >
      <div className="absolute bg-gradient-to-b from-[#fcfeff] h-[100px] left-1/2 rounded-[14px] to-[#ebf7ff] top-0 translate-x-[-50%] w-[760px]">
        <div aria-hidden="true" className="absolute border-2 border-[#48affa] border-solid inset-0 pointer-events-none rounded-[14px] border-effect" />
      </div>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[44px] leading-[43.874px] left-[380px] not-italic text-[#3e4a55] text-[26px] text-center top-[28px] tracking-[0.8278px] translate-x-[-50%] w-[570px] text-effect">下载磁盘清理大师，轻松解决电脑问题！</p>
    </div>
  );
}

function Component18() {
  return (
    <div className="h-[830px] relative shrink-0 w-full" data-name="板块3">
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%+0.5px)] not-italic text-[#111111] text-[36px] text-center top-[80px] tracking-[1px] translate-x-[-50%] w-[643px]">您的电脑是否遇到过以下的问题?</p>
      <Component16 />
      <Component17 />
      <Component3 />
      <Component4 />
      <Component5 />
      <Component6 />
      <Component7 />
      <Btn1 />
    </div>
  );
}

function Component19() {
  return (
    <div className="absolute h-[350px] left-[990px] top-[139px] w-[490px]" data-name="配图">
      <div className="absolute h-[283px] left-[10px] top-[15px] w-[430px]" data-name="1 281">
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <img alt="" className="absolute h-[100.73%] left-[-0.03%] max-w-none top-[-0.73%] w-[100.06%]" src={img1281} />
        </div>
      </div>
    </div>
  );
}

function Btn2() {
  const handleClean = () => {
    handleDownloadWithShortCode(401, "点击C盘清理功能块");
  };

  return (
    <div 
      className="absolute h-[70px] left-[481px] overflow-visible top-[377px] w-[220px] btn-hover-effect" 
      data-name="btn"
      onClick={handleClean}
    >
      <div className="absolute bg-[#00d473] btn-clean inset-0 rounded-[8px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-[26.36%] not-italic right-[26.36%] text-[26px] text-center text-nowrap text-white top-[calc(50%-15px)] whitespace-pre">立即清理</p>
    </div>
  );
}

function Component20() {
  return (
    <div className="bg-[#f5fbff] h-[627px] relative shrink-0 w-full" data-name="板块4">
      <Component19 />
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] leading-[30px] left-[480px] not-italic text-[#555555] text-[16px] top-[227px] w-[400px]">一键深度清理系统C盘，精准识别无用缓存与更新残留，释放更多可用空间。有效避免磁盘爆满，保障电脑流畅运行。</p>
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%-479px)] not-italic text-[#111111] text-[36px] top-[150px] tracking-[1px] w-[450px]">C盘瘦身 · 深度清理</p>
      <Btn2 />
    </div>
  );
}

function Component21() {
  return (
    <div className="absolute h-[350px] left-[440px] top-[139px] w-[490px]" data-name="配图">
      <div className="absolute h-[283px] left-[60px] top-[15px] w-[430px]" data-name="1 281">
        <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img1282} />
      </div>
    </div>
  );
}

function Btn3() {
  const handleClean = () => {
    handleDownloadWithShortCode(402, "点击碎片清理功能块");
  };

  return (
    <div 
      className="absolute h-[70px] left-[1030px] overflow-visible top-[377px] w-[220px] btn-hover-effect" 
      data-name="btn"
      onClick={handleClean}
    >
      <div className="absolute bg-[#00d473] btn-clean inset-0 rounded-[8px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-[26.36%] not-italic right-[26.36%] text-[26px] text-center text-nowrap text-white top-[calc(50%-15px)] whitespace-pre">立即清理</p>
    </div>
  );
}

function Component22() {
  return (
    <div className="bg-white h-[627px] relative shrink-0 w-full" data-name="板块5">
      <Component21 />
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] leading-[30px] left-[1029px] not-italic text-[#555555] text-[16px] top-[227px] w-[400px]">整理磁盘碎片，优化文件存储结构。加快程序加载速度，让电脑时刻保持高效运行。</p>
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%+70px)] not-italic text-[#111111] text-[36px] top-[150px] tracking-[1px] w-[450px]">碎片清理 · 高效优化</p>
      <Btn3 />
    </div>
  );
}

function Component23() {
  return (
    <div className="absolute h-[350px] left-[990px] top-[139px] w-[490px]" data-name="配图">
      <div className="absolute h-[283px] left-[10px] top-[15px] w-[430px]" data-name="1 281">
        <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img1283} />
      </div>
    </div>
  );
}

function Btn4() {
  const handleClean = () => {
    handleDownloadWithShortCode(403, "点击大文件搬家功能块");
  };

  return (
    <div 
      className="absolute h-[70px] left-[481px] overflow-visible top-[377px] w-[220px] btn-hover-effect" 
      data-name="btn"
      onClick={handleClean}
    >
      <div className="absolute bg-[#00d473] btn-clean inset-0 rounded-[8px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-[26.36%] not-italic right-[26.36%] text-[26px] text-center text-nowrap text-white top-[calc(50%-15px)] whitespace-pre">立即清理</p>
    </div>
  );
}

function Component24() {
  return (
    <div className="bg-[#f5fbff] h-[627px] relative shrink-0 w-full" data-name="板块6">
      <Component23 />
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] leading-[30px] left-[480px] not-italic text-[#555555] text-[16px] top-[227px] w-[400px]">扫描并分类显示占用空间的大文件，支持快速定位与批量删除。轻松解决磁盘“空间杀手”。</p>
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%-479px)] not-italic text-[#111111] text-[36px] top-[150px] tracking-[1px] w-[450px]">大文件专清 · 批量处理</p>
      <Btn4 />
    </div>
  );
}

function Component25() {
  return (
    <div className="absolute h-[350px] left-[440px] top-[139px] w-[490px]" data-name="配图">
      <div className="absolute h-[283px] left-[60px] top-[15px] w-[430px]" data-name="1 281">
        <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img1284} />
      </div>
    </div>
  );
}

function Btn5() {
  const handleClean = () => {
    handleDownloadWithShortCode(404, "点击微信QQ清理功能块");
  };

  return (
    <div 
      className="absolute h-[70px] left-[1030px] overflow-visible top-[377px] w-[220px] btn-hover-effect" 
      data-name="btn"
      onClick={handleClean}
    >
      <div className="absolute bg-[#00d473] btn-clean inset-0 rounded-[8px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-[26.36%] not-italic right-[26.36%] text-[26px] text-center text-nowrap text-white top-[calc(50%-15px)] whitespace-pre">立即清理</p>
    </div>
  );
}

function Component26() {
  return (
    <div className="bg-white h-[627px] relative shrink-0 w-full" data-name="板块7">
      <Component25 />
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] leading-[30px] left-[1029px] not-italic text-[#555555] text-[16px] top-[227px] w-[400px]">智能扫描并清理微信缓存、语音、图片及视频等无用文件，避免系统空间被“隐形文件”占满。</p>
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%+70px)] not-italic text-[#111111] text-[36px] top-[150px] tracking-[1px] w-[450px]">微信QQ · 专属清理</p>
      <Btn5 />
    </div>
  );
}

function Component27() {
  return (
    <div className="absolute h-[350px] left-[990px] top-[139px] w-[490px]" data-name="配图">
      <div className="absolute h-[283px] left-[10px] top-[15px] w-[430px]" data-name="1 281">
        <img alt="" className="absolute inset-0 max-w-none object-50%-50% object-cover pointer-events-none size-full" src={img1285} />
      </div>
      <div className="absolute bg-gradient-to-b from-[#edfbff] h-[16px] left-[296px] to-[#f2fcff] top-[15px] w-[44px]" />
    </div>
  );
}

function Btn6() {
  const handleShred = () => {
    handleDownloadWithShortCode(405, "点击文件粉碎功能块");
  };

  return (
    <div 
      className="absolute h-[70px] left-[481px] overflow-visible top-[377px] w-[220px] btn-hover-effect" 
      data-name="btn"
      onClick={handleShred}
    >
      <div className="absolute bg-[#00d473] btn-clean inset-0 rounded-[8px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-[26.36%] not-italic right-[26.36%] text-[26px] text-center text-nowrap text-white top-[calc(50%-15px)] whitespace-pre">立即粉碎</p>
    </div>
  );
}

function Component8() {
  return (
    <div className="bg-[#f5fbff] h-[627px] relative shrink-0 w-full" data-name="板块8">
      <Component27 />
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] leading-[30px] left-[480px] not-italic text-[#555555] text-[16px] top-[227px] w-[400px]">彻底粉碎敏感文件，防止恢复软件找回。保障数据隐私安全，彻底告别隐患。</p>
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%-479px)] not-italic text-[#111111] text-[36px] top-[150px] tracking-[1px] w-[450px]">文件粉碎 · 无痕删除</p>
      <Btn6 />
    </div>
  );
}

function Component30() {
  return (
    <div className="absolute left-[37px] size-[32px] top-[32px]" data-name="头像">
      <div className="absolute left-0 size-[32px] top-0" data-name="image">
        <img alt="" className="block max-w-none size-full" height="32" src={imgImage2} width="32" />
      </div>
    </div>
  );
}

function Star14() {
  return (
    <div className="relative shrink-0 size-[14px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 14 14">
        <g id="Star 9">
          <path d={svgPaths.p1e2075f0} fill="url(#paint0_linear_1_1283)" id="Star 9_2" />
        </g>
        <defs>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1283" x1="1.53125" x2="12.4688" y1="1.09375" y2="12.4687">
            <stop stopColor="#FFDA51" />
            <stop offset="1" stopColor="#FFBB15" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}

function Star13() {
  return (
    <div className="absolute left-0 size-[14px] top-0">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 14 14">
        <g id="Star 13">
          <path d={svgPaths.p1e2075f0} fill="var(--fill-0, #E3E3E3)" id="Star 9" />
        </g>
      </svg>
    </div>
  );
}

function Star16() {
  return (
    <div className="absolute left-0 size-[14px] top-0">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 14 14">
        <g id="Star 13">
          <path d={svgPaths.p1e2075f0} fill="var(--fill-0, #E3E3E3)" id="Star 10" />
          <path d={svgPaths.p14005258} fill="url(#paint0_linear_1_1270)" id="Subtract" />
        </g>
        <defs>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1270" x1="1.53118" x2="12.4687" y1="1.09375" y2="12.4687">
            <stop stopColor="#FFDA51" />
            <stop offset="1" stopColor="#FFBB15" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}

function Star1() {
  return (
    <div className="relative shrink-0 size-[14px]" data-name="star">
      <Star13 />
      <Star16 />
    </div>
  );
}

function Component31() {
  return (
    <div className="absolute content-stretch flex gap-[2px] items-center left-[37px] top-[72px]" data-name="评分">
      {[...Array(4).keys()].map((_, i) => (
        <Star14 key={i} />
      ))}
      <Star1 />
    </div>
  );
}

function Component32({ className }: { className?: string }) {
  return (
    <div className={className || "absolute h-[255px] left-[750px] top-[200px] w-[420px]"} data-name="2">
      <div className="absolute bg-[#fffcf2] h-[245px] left-[5px] rounded-[10px] top-0 w-[410px]">
        <div aria-hidden="true" className="absolute border border-[#f3e9c9] border-solid inset-0 pointer-events-none rounded-[10px] shadow-[0px_4px_8px_0px_rgba(190,159,101,0.23)]" />
      </div>
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] h-[72px] leading-[24px] left-[calc(50%-173px)] not-italic text-[#555555] text-[14px] top-[141px] tracking-[1px] w-[346px]">设计文件体积大，硬盘常被项目文件占满。大文件专清一键列出占用最大的文件，支持批量删除，立刻腾出工作盘空间，效率提升明显。</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[17px] leading-[16px] left-[calc(50%-57px)] not-italic text-[#546371] text-[16px] top-[41px] tracking-[1px] w-[90px]">平面设计师</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[23px] leading-[22px] left-[calc(50%-133px)] not-italic text-[#546371] text-[22px] top-[36px] tracking-[1px] w-[70px]">陈小姐</p>
      <Component30 />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[30px] leading-[28px] left-[calc(50%-173px)] not-italic text-[#111111] text-[18px] top-[103px] tracking-[1px] w-[317px]">大文件专清能迅速找到空间杀手</p>
      <Component31 />
    </div>
  );
}

function Component33() {
  return (
    <div className="absolute left-[37px] size-[32px] top-[32px]" data-name="头像">
      <div className="absolute left-0 size-[32px] top-0" data-name="image">
        <img alt="" className="block max-w-none size-full" height="32" src={imgImage3} width="32" />
      </div>
    </div>
  );
}

function Star17() {
  return (
    <div className="relative shrink-0 size-[14px]">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 14 14">
        <g id="Star 9">
          <path d={svgPaths.p1e2075f0} fill="url(#paint0_linear_1_1283)" id="Star 9_2" />
        </g>
        <defs>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1283" x1="1.53125" x2="12.4688" y1="1.09375" y2="12.4687">
            <stop stopColor="#FFDA51" />
            <stop offset="1" stopColor="#FFBB15" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}

function Star21() {
  return (
    <div className="absolute left-0 size-[14px] top-0">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 14 14">
        <g id="Star 13">
          <path d={svgPaths.p1e2075f0} fill="var(--fill-0, #E3E3E3)" id="Star 9" />
        </g>
      </svg>
    </div>
  );
}

function Star22() {
  return (
    <div className="absolute left-0 size-[14px] top-0">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 14 14">
        <g id="Star 13">
          <path d={svgPaths.p1e2075f0} fill="var(--fill-0, #E3E3E3)" id="Star 10" />
          <path d={svgPaths.p14005258} fill="url(#paint0_linear_1_1270)" id="Subtract" />
        </g>
        <defs>
          <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1270" x1="1.53118" x2="12.4687" y1="1.09375" y2="12.4687">
            <stop stopColor="#FFDA51" />
            <stop offset="1" stopColor="#FFBB15" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  );
}

function Star2() {
  return (
    <div className="relative shrink-0 size-[14px]" data-name="star">
      <Star21 />
      <Star22 />
    </div>
  );
}

function Component34() {
  return (
    <div className="absolute content-stretch flex gap-[2px] items-center left-[37px] top-[72px]" data-name="评分">
      {[...Array(4).keys()].map((_, i) => (
        <Star17 key={i} />
      ))}
      <Star2 />
    </div>
  );
}

function Component35({ className }: { className?: string }) {
  return (
    <div className={className || "absolute h-[255px] left-[1194px] top-[200px] w-[420px]"} data-name="3">
      <div className="absolute bg-[#fffcf2] h-[245px] left-[5px] rounded-[10px] top-0 w-[410px]">
        <div aria-hidden="true" className="absolute border border-[#f3e9c9] border-solid inset-0 pointer-events-none rounded-[10px] shadow-[0px_4px_8px_0px_rgba(190,159,101,0.23)]" />
      </div>
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] h-[72px] leading-[24px] left-[calc(50%-173px)] not-italic text-[#555555] text-[14px] top-[141px] tracking-[1px] w-[346px]">公司笔记本长期使用未维护，碎片很多，运行慢到不行。用碎片整理功能后程序启动和编译速度都快了不少，硬盘读写更稳定，开发效率回升。</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[17px] leading-[16px] left-[calc(50%-57px)] not-italic text-[#546371] text-[16px] top-[41px] tracking-[1px] w-[90px]">软件工程师</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[23px] leading-[22px] left-[calc(50%-133px)] not-italic text-[#546371] text-[22px] top-[36px] tracking-[1px] w-[70px]">李先生</p>
      <Component33 />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[30px] leading-[28px] left-[calc(50%-173px)] not-italic text-[#111111] text-[18px] top-[103px] tracking-[1px] w-[317px]">碎片清理后系统响应明显提升</p>
      <Component34 />
    </div>
  );
}

// 用户4 - 刘先生 头像
function UserAvatar4() {
  return (
    <div className="absolute left-[37px] size-[32px] top-[32px]" data-name="头像">
      <div className="absolute left-0 size-[32px] top-0" data-name="image">
        <img alt="" className="block max-w-none size-full" height="32" src={imgImage4} width="32" />
      </div>
    </div>
  );
}

// 用户4 - 刘先生 评分
function UserRating4() {
  return (
    <div className="absolute content-stretch flex gap-[2px] items-center left-[37px] top-[72px]" data-name="评分">
      {[...Array(4).keys()].map((_, i) => (
        <Star14 key={i} />
      ))}
      <Star1 />
    </div>
  );
}

// 用户4 - 刘先生 卡片
function UserCard4({ className }: { className?: string }) {
  return (
    <div className={className} data-name="4">
      <div className="absolute bg-[#fffcf2] h-[245px] left-[5px] rounded-[10px] top-0 w-[410px]">
        <div aria-hidden="true" className="absolute border border-[#f3e9c9] border-solid inset-0 pointer-events-none rounded-[10px] shadow-[0px_4px_8px_0px_rgba(190,159,101,0.23)]" />
      </div>
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] h-[72px] leading-[24px] left-[calc(50%-173px)] not-italic text-[#555555] text-[14px] top-[141px] tracking-[1px] w-[346px]">经常收发客户发票图片，微信占用空间很大。专属微信清理只清缓存不删聊天记录，放心又干净，电脑空间瞬间轻松许多。</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[17px] leading-[16px] left-[calc(50%-57px)] not-italic text-[#546371] text-[16px] top-[41px] tracking-[1px] w-[90px]">会计</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[23px] leading-[22px] left-[calc(50%-133px)] not-italic text-[#546371] text-[22px] top-[36px] tracking-[1px] w-[70px]">刘先生</p>
      <UserAvatar4 />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[30px] leading-[28px] left-[calc(50%-173px)] not-italic text-[#111111] text-[18px] top-[103px] tracking-[1px] w-[317px]">微信专清删除无用缓存，省心又实用</p>
      <UserRating4 />
    </div>
  );
}

// 用户5 - 王同学 头像
function UserAvatar5() {
  return (
    <div className="absolute left-[37px] size-[32px] top-[32px]" data-name="头像">
      <div className="absolute left-0 size-[32px] top-0" data-name="image">
        <img alt="" className="block max-w-none size-full" height="32" src={imgImage5} width="32" />
      </div>
    </div>
  );
}

// 用户5 - 王同学 评分
function UserRating5() {
  return (
    <div className="absolute content-stretch flex gap-[2px] items-center left-[37px] top-[72px]" data-name="评分">
      {[...Array(4).keys()].map((_, i) => (
        <Star17 key={i} />
      ))}
      <Star2 />
    </div>
  );
}

// 用户5 - 王同学 卡片
function UserCard5({ className }: { className?: string }) {
  return (
    <div className={className} data-name="5">
      <div className="absolute bg-[#fffcf2] h-[245px] left-[5px] rounded-[10px] top-0 w-[410px]">
        <div aria-hidden="true" className="absolute border border-[#f3e9c9] border-solid inset-0 pointer-events-none rounded-[10px] shadow-[0px_4px_8px_0px_rgba(190,159,101,0.23)]" />
      </div>
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] h-[72px] leading-[24px] left-[calc(50%-173px)] not-italic text-[#555555] text-[14px] top-[141px] tracking-[1px] w-[346px]">准备卖旧笔记本电脑，担心隐私数据恢复。文件粉碎功能将电脑彻底清除，不可恢复，用完放心多了，隐私安全多了一道保障。</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[17px] leading-[16px] left-[calc(50%-57px)] not-italic text-[#546371] text-[16px] top-[41px] tracking-[1px] w-[90px]">大学生</p>
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[23px] leading-[22px] left-[calc(50%-133px)] not-italic text-[#546371] text-[22px] top-[36px] tracking-[1px] w-[70px]">王同学</p>
      <UserAvatar5 />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] h-[30px] leading-[28px] left-[calc(50%-173px)] not-italic text-[#111111] text-[18px] top-[103px] tracking-[1px] w-[317px]">文件粉碎让电脑更安心</p>
      <UserRating5 />
    </div>
  );
}

function Component36() {
  return (
    <div className="absolute left-[1638px] size-[48px] top-[304px]" data-name=">">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 48 48">
        <g id=">">
          <circle cx="24" cy="24" fill="var(--fill-0, #FDFDFD)" id="Ellipse 440" r="23.5" stroke="var(--stroke-0, #DAE5EF)" />
          <path d={svgPaths.paaaa480} id="Vector 406" stroke="var(--stroke-0, #B8C6D3)" strokeLinecap="round" strokeWidth="3" />
        </g>
      </svg>
    </div>
  );
}

function Component37() {
  return (
    <div className="relative size-[48px]" data-name="<">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 48 48">
        <g id="<">
          <circle cx="24" cy="24" fill="var(--fill-0, #FDFDFD)" id="Ellipse 440" r="23.5" stroke="var(--stroke-0, #DAE5EF)" />
          <path d={svgPaths.paaaa480} id="Vector 406" stroke="var(--stroke-0, #B8C6D3)" strokeLinecap="round" strokeWidth="3" />
        </g>
      </svg>
    </div>
  );
}

function Component9() {
  // startIndex 表示窗口的起始位置（显示的第一张卡片的索引）
  const [startIndex, setStartIndex] = useState(0);
  
  // 5个用户卡片组件数组
  const userCards = [
    { component: Component1, key: 'user1', id: 0 },
    { component: Component32, key: 'user2', id: 1 },
    { component: Component35, key: 'user3', id: 2 },
    { component: UserCard4, key: 'user4', id: 3 },
    { component: UserCard5, key: 'user5', id: 4 },
  ];
  
  // 左箭头点击 - 窗口向左滑动（显示前面的卡片）
  const handlePrev = () => {
    setStartIndex((prev) => (prev === 0 ? userCards.length - 1 : prev - 1));
  };
  
  // 右箭头点击 - 窗口向右滑动（显示后面的卡片）
  const handleNext = () => {
    setStartIndex((prev) => (prev === userCards.length - 1 ? 0 : prev + 1));
  };
  
  // 获取要显示的3个卡片（窗口显示：startIndex, startIndex+1, startIndex+2）
  const getVisibleCards = () => {
    const total = userCards.length;
    const firstIndex = startIndex;
    const secondIndex = (startIndex + 1) % total;
    const thirdIndex = (startIndex + 2) % total;
    
    return [
      { ...userCards[firstIndex], position: 'first', index: firstIndex },
      { ...userCards[secondIndex], position: 'second', index: secondIndex },
      { ...userCards[thirdIndex], position: 'third', index: thirdIndex },
    ];
  };
  
  const visibleCards = getVisibleCards();
  
  return (
    <div className="bg-white h-[581px] relative shrink-0 w-[1920px]" data-name="板块9">
      {/* 动态渲染3个可见卡片，带滑动动画 */}
      {visibleCards.map((card, idx) => {
        const CardComponent = card.component;
        const classNames = [
          "absolute h-[255px] left-[306px] top-[200px] w-[420px] transition-all duration-500 ease-in-out",
          "absolute h-[255px] left-[750px] top-[200px] w-[420px] transition-all duration-500 ease-in-out",
          "absolute h-[255px] left-[1194px] top-[200px] w-[420px] transition-all duration-500 ease-in-out"
        ];
        
        return (
          <CardComponent
            key={`${card.key}-${card.index}`}
            className={classNames[idx]}
          />
        );
      })}
      
      <p className="absolute font-['Microsoft_YaHei:Regular',_sans-serif] h-[26px] leading-[20px] left-[calc(50%+0.5px)] not-italic text-[#555555] text-[20px] text-center top-[133px] tracking-[1px] translate-x-[-50%] w-[295px]">(以下内容来自用户真实评价)</p>
      <p className="absolute font-['Microsoft_YaHei:Bold',_sans-serif] h-[53px] leading-[53px] left-[calc(50%+0.5px)] not-italic text-[#111111] text-[36px] text-center top-[69px] tracking-[1px] translate-x-[-50%] w-[687px]">用户评价</p>
      
      {/* 右箭头 */}
      <div 
        className="absolute left-[1638px] size-[48px] top-[304px] cursor-pointer hover:opacity-70 transition-opacity z-50" 
        onClick={handlePrev}
      >
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 48 48">
          <g>
            <circle cx="24" cy="24" fill="#FDFDFD" r="23.5" stroke="#DAE5EF" />
            <path d={svgPaths.paaaa480} stroke="#B8C6D3" strokeLinecap="round" strokeWidth="3" />
          </g>
        </svg>
      </div>
      
      {/* 左箭头 */}
      <div 
        className="absolute left-[234px] size-[48px] top-[304px] cursor-pointer hover:opacity-70 transition-opacity z-50"
        onClick={handleNext}
      >
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 48 48" style={{ transform: 'scaleX(-1)' }}>
          <g>
            <circle cx="24" cy="24" fill="#FDFDFD" r="23.5" stroke="#DAE5EF" />
            <path d={svgPaths.paaaa480} stroke="#B8C6D3" strokeLinecap="round" strokeWidth="3" />
          </g>
        </svg>
      </div>
    </div>
  );
}

function Component38() {
  return (
    <div className="absolute contents left-[660px] top-[113px]" data-name="编组 9">
      <div className="absolute h-[347.947px] left-[660px] opacity-[0.15] top-[350.24px] w-[601px]" data-name="路径 11备份 6">
        <div className="absolute bottom-0 left-[0.02%] right-[0.06%] top-[0.09%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 601 348">
            <path clipRule="evenodd" d={svgPaths.p31ba1780} fill="var(--fill-0, #D5EDFF)" fillRule="evenodd" id="è·¯å¾ 11å¤ä»½ 6" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[411.211px] left-[667.91px] opacity-[0.15] top-[255.34px] w-[577.276px]" data-name="路径 11备份">
        <div className="absolute bottom-0 left-[0.02%] right-0 top-[0.07%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 578 411">
            <path clipRule="evenodd" d={svgPaths.p27c4b400} fill="url(#paint0_linear_1_1253)" fillRule="evenodd" id="è·¯å¾ 11å¤ä»½" />
            <defs>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1253" x1="504.915" x2="-15.9227" y1="-46.4177" y2="276.269">
                <stop stopColor="#F0F8FF" />
                <stop offset="1" stopColor="#A0DAFF" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute flex h-[39.539px] items-center justify-center left-[691.63px] top-[492.58px] w-[31.633px]">
        <div className="flex-none rotate-[180deg] scale-y-[-100%]">
          <div className="h-[39.539px] opacity-[0.15] relative w-[31.633px]" data-name="形状结合">
            <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 40">
              <path d={svgPaths.p27c55b90} fill="var(--fill-0, #218DFF)" id="å½¢ç¶ç»å" />
            </svg>
          </div>
        </div>
      </div>
      <div className="absolute h-[47.445px] left-[1197.74px] opacity-[0.15] top-[460.95px] w-[31.633px]" data-name="形状结合">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 48">
          <path d={svgPaths.p24fb1a00} fill="var(--fill-0, #43A9FF)" id="å½¢ç¶ç»å" />
        </svg>
      </div>
      <div className="absolute h-[340.039px] left-[667.91px] opacity-[0.15] top-[223.71px] w-[577.276px]" data-name="路径 11">
        <div className="absolute bottom-0 left-[0.02%] right-[0.06%] top-[0.09%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 577 340">
            <path clipRule="evenodd" d={svgPaths.pb325100} fill="url(#paint0_linear_1_1486)" fillRule="evenodd" id="è·¯å¾ 11" />
            <defs>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1486" x1="577.148" x2="-0.128285" y1="-0.298569" y2="-0.298569">
                <stop stopColor="#FDFEFF" />
                <stop offset="1" stopColor="#D2EFFF" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute h-[284.684px] left-[715.36px] opacity-[0.15] top-[247.43px] w-[490.289px]" data-name="路径 11备份 9">
        <div className="absolute bottom-0 left-[0.02%] right-[0.06%] top-[0.09%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 490 285">
            <path clipRule="evenodd" d={svgPaths.p3e5fd700} fill="url(#paint0_linear_1_1470)" fillRule="evenodd" id="è·¯å¾ 11å¤ä»½ 9" />
            <defs>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1470" x1="490.181" x2="-0.108955" y1="-0.249965" y2="-0.249965">
                <stop stopColor="#47D7FF" />
                <stop offset="1" stopColor="#2479EF" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute h-[284.684px] left-[715.36px] opacity-[0.15] top-[192.08px] w-[490.289px]" data-name="路径 11备份 7">
        <div className="absolute bottom-0 left-[0.02%] right-[0.06%] top-[0.09%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 490 285">
            <path clipRule="evenodd" d={svgPaths.p3e5fd700} fill="url(#paint0_linear_1_1334)" fillRule="evenodd" id="è·¯å¾ 11å¤ä»½ 7" opacity="0.4" />
            <defs>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1334" x1="490.181" x2="490.181" y1="284.434" y2="-0.249965">
                <stop stopColor="#60F2FF" />
                <stop offset="1" stopColor="#2AB8FF" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute h-[284.684px] left-[715.36px] opacity-[0.15] top-[113px] w-[490.289px]" data-name="路径 11备份 8">
        <div className="absolute bottom-0 left-[0.02%] right-[0.06%] top-[0.09%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 490 285">
            <path clipRule="evenodd" d={svgPaths.p3e5fd700} fill="url(#paint0_linear_1_1294)" fillRule="evenodd" id="è·¯å¾ 11å¤ä»½ 8" opacity="0.4" />
            <defs>
              <linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_1_1294" x1="490.181" x2="490.181" y1="284.434" y2="-0.249965">
                <stop stopColor="#59EFFF" />
                <stop offset="1" stopColor="#37BCFF" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>
      <div className="absolute h-[113.473px] left-[942.82px] opacity-[0.15] top-[144.63px] w-[199.561px]" data-name="路径 11备份 11">
        <div className="absolute bottom-0 left-[0.04%] right-[0.11%] top-[0.17%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 200 114">
            <path d={svgPaths.p1cf85480} fill="var(--fill-0, #B5EDFF)" id="è·¯å¾ 11å¤ä»½ 11" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[113.473px] left-[942.82px] opacity-[0.15] top-[136.72px] w-[199.561px]" data-name="路径 11备份 10">
        <div className="absolute bottom-0 left-[0.04%] right-[0.11%] top-[0.17%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 200 114">
            <path d={svgPaths.p1cf85480} fill="var(--fill-0, white)" id="è·¯å¾ 11å¤ä»½ 10" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[113.473px] left-[887.46px] opacity-[0.15] top-[176.26px] w-[199.561px]" data-name="路径 11备份 13">
        <div className="absolute bottom-0 left-[0.04%] right-[0.11%] top-[0.17%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 200 114">
            <path d={svgPaths.p1cf85480} fill="var(--fill-0, #B5EDFF)" id="è·¯å¾ 11å¤ä»½ 11" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[113.473px] left-[887.46px] opacity-[0.15] top-[168.35px] w-[199.561px]" data-name="路径 11备份 12">
        <div className="absolute bottom-0 left-[0.04%] right-[0.11%] top-[0.17%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 200 114">
            <path d={svgPaths.p1cf85480} fill="var(--fill-0, white)" id="è·¯å¾ 11å¤ä»½ 10" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[69.912px] left-[824.2px] opacity-[0.15] top-[215.8px] w-[115.604px]" data-name="路径 11备份 15">
        <div className="absolute bottom-0 left-[0.07%] right-[0.19%] top-[0.28%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 116 70">
            <path d={svgPaths.p211c7d00} fill="var(--fill-0, #B5EDFF)" id="è·¯å¾ 11å¤ä»½ 15" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[29.534px] left-[950.73px] opacity-[0.15] top-[286.97px] w-[46.974px]" data-name="路径 11备份 16">
        <div className="absolute bottom-0 left-[0.18%] right-[0.46%] top-[0.66%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 47 30">
            <path d={svgPaths.p6ad8bc0} fill="var(--fill-0, #B5EDFF)" id="è·¯å¾ 11å¤ä»½ 16" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[69.912px] left-[824.2px] opacity-[0.15] top-[207.9px] w-[115.604px]" data-name="路径 11备份 14">
        <div className="absolute bottom-0 left-[0.07%] right-[0.19%] top-[0.28%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 116 70">
            <path d={svgPaths.p211c7d00} fill="var(--fill-0, white)" id="è·¯å¾ 11å¤ä»½ 14" />
          </svg>
        </div>
      </div>
      <div className="absolute h-[29.534px] left-[950.73px] opacity-[0.15] top-[279.07px] w-[46.974px]" data-name="路径 11备份 17">
        <div className="absolute bottom-0 left-[0.18%] right-[0.46%] top-[0.66%]">
          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 47 30">
            <path d={svgPaths.p6ad8bc0} fill="var(--fill-0, white)" id="è·¯å¾ 11å¤ä»½ 17" />
          </svg>
        </div>
      </div>
    </div>
  );
}

function Component39() {
  return (
    <div className="absolute left-[254px] size-[32px] top-[24px]" data-name="下载">
      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
        <g id="ä¸è½½">
          <path d={svgPaths.p1af7d100} id="Vector 402" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
          <path d="M16 23V4" id="Vector 403" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
          <path d="M16 23L8.5 15.5" id="Vector 404" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
          <path d="M16 23L23.5 15.5" id="Vector 405" stroke="var(--stroke-0, white)" strokeLinecap="round" strokeWidth="3" />
        </g>
      </svg>
    </div>
  );
}

function Btn7() {
  const handleDownload = () => {
    handleDownloadWithShortCode(5, "点击最后一个板块立即下载按钮");
  };

  return (
    <div 
      className="absolute h-[80px] left-[780px] overflow-visible top-[321px] w-[370px] btn-hover-effect" 
      data-name="btn"
      onClick={handleDownload}
    >
      <div className="absolute bg-[#00d473] btn-download inset-0 rounded-[16px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-1/2 not-italic text-[30px] text-center text-white top-[calc(50%-15px)] translate-x-[-50%] w-[122px]">立即下载</p>
      <Component39 />
    </div>
  );
}

function Component48() {
  return (
    <div className="absolute left-[23px] overflow-clip size-[64px] top-[3px]" data-name="48">
      <div className="absolute inset-[1.3%_4.15%_49.24%_22.88%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 47 32">
          <path clipRule="evenodd" d={svgPaths.p1708be00} fill="var(--fill-0, #42AEEC)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute inset-[42.85%_8.6%_49.34%_22.49%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 45 5">
          <path clipRule="evenodd" d={svgPaths.p3a566bb0} fill="var(--fill-0, #137DBB)" fillRule="evenodd" id="Vector" opacity="0.8" />
        </svg>
      </div>
      <div className="absolute bottom-0 left-[2.41%] right-[4.23%] top-[76.46%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 16">
          <path clipRule="evenodd" d={svgPaths.p2233c90} fill="var(--fill-0, #DB8B35)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute bottom-0 left-[1.81%] right-[1.81%] top-[45.27%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 62 36">
          <path clipRule="evenodd" d={svgPaths.p22b53f80} fill="var(--fill-0, #F8BE5D)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute inset-[31.19%_33%_58.75%_53.92%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9 7">
          <path clipRule="evenodd" d={svgPaths.p123f7380} fill="var(--fill-0, #1A8ED2)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute flex inset-[31.19%_34.66%_59.05%_55.73%] items-center justify-center">
        <div className="flex-none h-[6.567px] skew-x-[342.828deg] w-[4.121px]">
          <p className="font-['Arial:Bold',_sans-serif] leading-[normal] not-italic relative size-full text-[#77ceff] text-[7.509px]">C</p>
        </div>
      </div>
    </div>
  );
}

function Logo() {
  return (
    <div className="absolute h-[72px] left-1/2 top-[80px] translate-x-[-50%] w-[368px]" data-name="logo">
      <Component48 />
      <div className="absolute flex flex-col font-['MiSans:Medium',_sans-serif] justify-center leading-[0] left-[111px] not-italic text-[#3e4a55] text-[40px] text-nowrap top-[35.5px] translate-y-[-50%]">
        <p className="leading-[normal] whitespace-pre">磁盘清理大师</p>
      </div>
    </div>
  );
}

function Component10() {
  const [updateDate, setUpdateDate] = useState('2025-10-15');

  useEffect(() => {
    setUpdateDate(getUpdateDate());
  }, []);

  return (
    <div className="bg-[#f5fbff] h-[523px] overflow-clip relative shrink-0 w-full" data-name="板块10">
      <Component38 />
      <div className="absolute flex flex-col font-['MiSans:Regular',_sans-serif] h-[26px] justify-center leading-[0] left-1/2 not-italic text-[#888888] text-[12px] text-center top-[430px] translate-x-[-50%] translate-y-[-50%] w-[440px]">
        <p className="leading-[16px] whitespace-pre-wrap">{`使用系统：windows 11/10/8/7/xp   更新时间：${updateDate}`}</p>
      </div>
      <Btn7 />
      <div className="absolute flex flex-col font-['MiSans:Demibold',_sans-serif] h-[105px] justify-center leading-[0] left-1/2 not-italic text-[#333333] text-[56px] text-center top-[212.5px] tracking-[1px] translate-x-[-50%] translate-y-[-50%] w-[976px]">
        <p className="leading-[56px]">一款专业电脑C盘垃圾清理工具</p>
      </div>
      <Logo />
    </div>
  );
}

function Component40() {
  return (
    <div className="absolute content-stretch flex flex-col items-start left-0 top-[90px] w-[1920px]" data-name="模块">
      <Component15 />
      <Component2 />
      <Component18 />
      <Component20 />
      <Component22 />
      <Component24 />
      <Component26 />
      <Component8 />
      <Component9 />
      <Component10 />
    </div>
  );
}

function Component49() {
  return (
    <div className="absolute left-0 overflow-clip size-[48px] top-0" data-name="48">
      <div className="absolute inset-[1.3%_4.15%_49.24%_22.88%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 36 24">
          <path clipRule="evenodd" d={svgPaths.p1ef5b7f0} fill="var(--fill-0, #42AEEC)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute inset-[42.85%_8.6%_49.34%_22.49%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 34 4">
          <path clipRule="evenodd" d={svgPaths.p30bf2500} fill="var(--fill-0, #137DBB)" fillRule="evenodd" id="Vector" opacity="0.8" />
        </svg>
      </div>
      <div className="absolute bottom-0 left-[2.41%] right-[4.23%] top-[76.46%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 45 12">
          <path clipRule="evenodd" d={svgPaths.p3b38b080} fill="var(--fill-0, #DB8B35)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute bottom-0 left-[1.81%] right-[1.81%] top-[45.27%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 47 27">
          <path clipRule="evenodd" d={svgPaths.pe37b900} fill="var(--fill-0, #F8BE5D)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute inset-[31.19%_33%_58.75%_53.92%]" data-name="Vector">
        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 7 5">
          <path clipRule="evenodd" d={svgPaths.p17ffe000} fill="var(--fill-0, #1A8ED2)" fillRule="evenodd" id="Vector" />
        </svg>
      </div>
      <div className="absolute flex inset-[31.19%_34.66%_59.05%_55.73%] items-center justify-center">
        <div className="flex-none h-[4.926px] skew-x-[342.828deg] w-[3.091px]">
          <p className="font-['Arial:Bold',_sans-serif] leading-[normal] not-italic relative size-full text-[#77ceff] text-[5.632px]">C</p>
        </div>
      </div>
    </div>
  );
}

function Frame40059() {
  return (
    <div className="h-[48px] relative shrink-0 w-[200px]">
      <Component49 />
      <div className="absolute flex flex-col font-['MiSans:Medium',_sans-serif] justify-center leading-[0] left-[64px] not-italic text-[20px] text-black text-nowrap top-[24px] translate-y-[-50%]">
        <p className="leading-[normal] whitespace-pre">磁盘清理大师</p>
      </div>
    </div>
  );
}

function Frame287() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">C盘瘦身</p>
    </div>
  );
}

function Component42() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - C盘瘦身");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame287 />
    </div>
  );
}

function Frame288() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">碎片清理</p>
    </div>
  );
}

function Component44() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - 碎片清理");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame288 />
    </div>
  );
}

function Frame289() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">隐私清理</p>
    </div>
  );
}

function Component46() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - 隐私清理");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame289 />
    </div>
  );
}

function Frame290() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">大文件专清</p>
    </div>
  );
}

function Component50() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - 大文件专清");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame290 />
    </div>
  );
}

function Frame291() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">微信专清</p>
    </div>
  );
}

function Component52() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - 微信专清");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame291 />
    </div>
  );
}

function Frame292() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">QQ专清</p>
    </div>
  );
}

function Component54() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - QQ专清");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame292 />
    </div>
  );
}

function Frame293() {
  return (
    <div className="content-stretch flex items-center justify-center relative shrink-0">
      <p className="font-['Microsoft_YaHei:Bold',_sans-serif] leading-[normal] not-italic relative shrink-0 text-[#111111] text-[14px] text-center text-nowrap whitespace-pre">文件粉碎</p>
    </div>
  );
}

function Component56() {
  const handleClick = () => {
    handleDownloadWithShortCode(101, "点击导航栏 - 文件粉碎");
  };

  return (
    <div 
      className="box-border content-stretch flex gap-[8px] h-[48px] items-center justify-center overflow-clip px-[24px] py-[16px] relative rounded-[8px] shrink-0 w-[120px] nav-btn-hover" 
      data-name="头部模块"
      onClick={handleClick}
    >
      <Frame293 />
    </div>
  );
}

function Component57() {
  return (
    <div className="content-stretch flex items-center relative shrink-0" data-name="功能导航">
      <Component42 />
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "32", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[90deg]">
          <div className="h-0 relative w-[32px]">
            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 1">
                <line id="Line 2" stroke="var(--stroke-0, #EFF4F8)" x2="32" y1="0.5" y2="0.5" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <Component44 />
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "32", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[90deg]">
          <div className="h-0 relative w-[32px]">
            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 1">
                <line id="Line 2" stroke="var(--stroke-0, #EFF4F8)" x2="32" y1="0.5" y2="0.5" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <Component46 />
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "32", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[90deg]">
          <div className="h-0 relative w-[32px]">
            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 1">
                <line id="Line 2" stroke="var(--stroke-0, #EFF4F8)" x2="32" y1="0.5" y2="0.5" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <Component50 />
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "32", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[90deg]">
          <div className="h-0 relative w-[32px]">
            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 1">
                <line id="Line 2" stroke="var(--stroke-0, #EFF4F8)" x2="32" y1="0.5" y2="0.5" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <Component52 />
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "32", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[90deg]">
          <div className="h-0 relative w-[32px]">
            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 1">
                <line id="Line 2" stroke="var(--stroke-0, #EFF4F8)" x2="32" y1="0.5" y2="0.5" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <Component54 />
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]" style={{ "--transform-inner-width": "32", "--transform-inner-height": "0" } as React.CSSProperties}>
        <div className="flex-none rotate-[90deg]">
          <div className="h-0 relative w-[32px]">
            <div className="absolute bottom-0 left-0 right-0 top-[-1px]">
              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 1">
                <line id="Line 2" stroke="var(--stroke-0, #EFF4F8)" x2="32" y1="0.5" y2="0.5" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <Component56 />
    </div>
  );
}

function Frame294() {
  return (
    <div className="content-stretch flex gap-[16px] items-center justify-end relative shrink-0">
      <Component57 />
    </div>
  );
}

function Btn8() {
  const handleClean = () => {
    handleDownloadWithShortCode(1, "点击顶部导航栏立即清理按钮");
  };

  return (
    <div 
      className="h-[56px] relative shrink-0 w-[180px] btn-hover-effect animation_sty" 
      data-name="btn"
      onClick={handleClean}
      style={{ overflow: 'hidden' }}
    >
      <div className="absolute bg-[#00d473] btn-clean inset-0 rounded-[6px]" data-name="矩形" />
      <p className="absolute font-['Microsoft_YaHei:Semibold',_sans-serif] leading-[30px] left-[21.11%] not-italic right-[21.11%] text-[26px] text-center text-nowrap text-white top-[calc(50%-15px)] whitespace-pre z-10">立即清理</p>
      <i style={{ pointerEvents: 'none' }}></i>
    </div>
  );
}

function Component58() {
  return (
    <div className="fixed bg-white box-border content-stretch flex h-[90px] items-center justify-center left-0 right-0 px-[340px] py-[16px] shadow-[0px_4px_8px_0px_rgba(0,0,0,0.05)] top-0 w-full z-[9999]" data-name="金山毒霸官网导航栏" style={{ position: 'fixed', zIndex: 9999 }}>
      <div className="flex items-center justify-between w-[1920px] max-w-full">
        <Frame40059 />
        <Frame294 />
        <Btn8 />
      </div>
      <div className="absolute inset-0 pointer-events-none shadow-[0px_-1px_0px_0px_inset_#eeeff2]" />
    </div>
  );
}

export default function SeoVer10() {
  // 响应式缩放状态
  const [scale, setScale] = useState(1);

  useEffect(() => {
    // 响应式缩放处理函数
    const handleResize = () => {
      const designWidth = 1920; // 设计稿宽度
      const currentWidth = window.innerWidth;

      let newScale = 1;

      if (currentWidth < designWidth) {
        // 按比例动态缩放，确保内容完整显示
        newScale = currentWidth / designWidth;
      }
      // >= 1920px：保持 1（不缩放）

      setScale(newScale);
      console.log(`[响应式缩放] 屏幕宽度: ${currentWidth}px, 缩放比例: ${(newScale * 100).toFixed(1)}%`);
    };

    // 初始化
    handleResize();

    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);

    // 清理
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // 页面加载时自动上报埋点
  useEffect(() => {
    // 页面打开时上报，click=0, reveal=1
    reportTracking(0, "页面打开", 1).catch(err => {
      console.error('[埋点] 页面打开上报失败:', err);
    });
    console.log('[埋点] 页面打开自动上报已触发');
  }, []); // 空依赖数组，只在组件挂载时执行一次

  // 计算缩放后的实际宽度
  const scaledWidth = 1920 * scale;

  return (
    <div 
      className="bg-white relative min-h-screen w-full" 
      data-name="电脑医生_SEO官网改版_Ver_1_0"
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'flex-start'
      }}
    >
      {/* 导航栏固定在顶部，不参与缩放 */}
      <Component58 />
      
      {/* 主内容容器：宽度等于缩放后的实际宽度，实现居中 */}
      <div
        style={{
          width: `${scaledWidth}px`,
          minHeight: '100vh',
          position: 'relative',
          transition: 'width 0.3s ease-out'
        }}
      >
        {/* 内容区域，应用缩放变换 */}
        <div
          style={{
            transform: `scale(${scale})`,
            transformOrigin: 'top left',
            width: '1920px',
            minHeight: '100vh'
          }}
        >
          <Component40 />
        </div>
      </div>
    </div>
  );
}